
<style>
    .taskForm-content {
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        bottom: 0px;
        background:linear-gradient(121deg,rgba(30,92,175,1),rgba(81,175,188,1));
    }
	.taskForm-content .taskForm-left {
		width: 280px;
        height: 100%;
        float: left;
		overflow: hidden;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
	}
    .taskForm-content .taskForm-right {
        padding: 0 30px 0 12px;
        height: 100%;
		overflow: hidden;
	}
    .taskForm-content .blockTitle {
		color: #296ECA;
        padding: 0 0 0 35px;
	}

	.taskForm-content .blockTitle .title-icon {
		width: 16px;
		height: 16px;
		line-height: 16px;
		left: 15px;
		color: #5DC5DC;
	}
    .taskForm-content .task-ul-body {
        position: absolute;
        left:0px;
        top:43px;
        bottom:0px;
        width: 100%;
        padding: 0px;
    }
    .taskForm-content .task-ul {
        height: 100%;
        padding: 0px 4px;
        overflow: auto;
        margin-top: 10px;
    }
    .taskForm-content .task-ul li {
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        font-size: 14px;
        color: #373737;
        padding-left: 19px;
    }
    .li-order{
        font-weight: bold;
    }
    .taskForm-content .task-ul .li-time {
        display: inline-block;
    }
    .taskForm-content .task-ul li:hover,   .task-ul li.li-active{
        background-color: #4A9BF2;
        color: #FFFFFF;
    }
    .taskForm-content .taskForm-right .special-content {
        width: 50%;
        margin-bottom: 15px;
    }
    .taskForm-content .taskForm-right .special-key {
        overflow: hidden;
        width: 80px;
        float: left;
        padding: 8px 15px;
        text-align: center;
    }
    .taskForm-content .taskForm-right .special-value {
        overflow: hidden;
        width: 226px;
        line-height: 35px;
        height: 35px;
        border-radius: 6px;
        border: 1px solid #C5C5C5;
    }
    .taskForm-content .taskForm-right .check-value-box {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding: 0 2px;
    }
    .taskForm-content .taskForm-right .unit-content {
        display: inline-block;
        padding: 2px 5px;
        padding-right: 15px;
        background-color: #ccc;
        height: 20px;
        line-height: 20px;
    }
    .taskForm-content .taskForm-right .iframeContent {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        background-color: #fff;
        border: 1px solid #e6e6e6;
        border-top: none;
        margin-top: 9px;
    }
    
    .taskForm-content .taskForm-right .btn-color {
        float: right;
        margin-top: 6px;
        background-color: #2669B1;
    }
    .taskForm-content .iframeContent .task-updateHtml-form {
        width: 100%;
        height: 774px;
        overflow: hidden;
    }
    .layui-btn-complete{
        width: 96px;
        height: 30px;
        line-height: 30px;
        margin-left: 82px;
        background: url(../../../../dist/style/res/about/form-complete.png) no-repeat #2669B1;
        background-position: 6px 5px;
        color: #FFFFFF;
        padding-left: 31px;
    }
    .li-name{
        display: inline-block;
        margin: 0 25px 0 16px;
    }
    .layui-input-normal{
        width: 226px;
        height: 35px;
        line-height: 35px;
        border-radius: 6px;
    }
    .layui-form-item{
        margin: 0;
    }
    .layui-form-item .layui-input-inline{
        width: inherit;
        margin: 0;
    }
    .layui-form-item .layui-inline{
        margin: 0 29px 0 0;
    }
    .layui-item-first{
        margin-bottom: 21px;
    }
    .layui-form-label{
        padding: 8px 15px;
        text-align: center;
    }
    .layui-input-block .layui-textarea{
        width: 544px;
        min-height: 35px !important;
        padding: 0;
    }
</style>
<div class="taskForm-content layui-fluid">
    <div class="taskForm-left">
        <div class="layui-card" style="position: relative;height: 100%;">
            <div class="layui-card-header blockTitle">
                <i class="layui-icon layui-icon-form title-icon"></i>
                任务列表
                <button type="button" class="layui-btn btn-color T-eBtn layui-btn-complete" data-target="add">
                    配置完成
                </button>
            </div>
            <div class="layui-card-body task-ul-body" style="position: absolute;left:0px;top:43px;bottom:0px;">
                <ul class="task-ul"></ul>
            </div>
        </div>
	</div>
	<div class="taskForm-right">
        <div class="layui-collapse" style="background-color: #fff;">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title" style="background-color: #fff;">任务信息</h2>
                <div class="layui-colla-content layui-show">内容区域</div>
            </div>
        </div>
        <div class="iframeContent">
            <iframe id="taskFormIframe" class="task-updateHtml-form" src="./taskArrangeForm/main.html" frameborder="0"></iframe>
        </div>
    </div>
</div>

<script type="text/html" id="taskFormTaskUlTpl">
	{{#  if(d.length > 0){ 
		layui.each(d, function(index, item) {
    }}
		<li class="{{index == 0 ? 'task-li li-active' : 'li-active'}}" data-target='infoitem' data-index="{{index}}"><span class="li-order">{{index+1}}</span><span class="li-name">{{item.taskname.length > 12 ? item.taskname.substring(0,12)+'...' :  item.taskname}}</span> <span class="li-time">{{moment(item.createtime).format('YYYY-MM-DD')}}</span></li>
	{{#  }) } else { }}
        <li class="task-li">暂无数据</li>
	{{#  } }}
</script>

<script type="text/html" id="taskFormTaskBasicInfoTpl">
    <form class="layui-form taskForm-updateHtml-form" action="" lay-filter="taskForm-updateHtml-form-group">
            <div class="layui-form-item layui-item-first">
                <div class="layui-inline">
                    <label class="layui-form-label">任务名称：</label>
                    <div class="layui-input-inline">
                        <input type="text" value='{{d.taskname ? d.taskname : ""}}' name="taskname" lay-verify="taskname" disabled autocomplete="off" class="layui-input layui-input-normal">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">开始日期：</label>
                    <div class="layui-input-inline">
                        <input type="text" value='{{d.starttime ? moment(d.starttime).format("YYYY-MM-DD") : ""}}' name="starttime" disabled class="layui-input temporary-form-group-startDate layui-input-normal" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束日期：</label>
                    <div class="layui-input-inline">
                        <input type="text" value='{{d.endtime ? moment(d.endtime).format("YYYY-MM-DD") : ""}}' name="endtime" disabled class="layui-input temporary-form-group-endDate layui-input-normal" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">是否复核：</label>
                    <div class="layui-input-inline"  style="width: 80px;">
                        <input {{ d.review && d.review === '1' ? "checked" : null}} type="checkbox" name="review" disabled lay-skin="switch" lay-text="是|否">
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <div class="layui-inline">
                    <div class="special-key">上传文件：</div>
                        <div class="special-value">
                            <div class="check-value-box temporary-update-files">
                                    {{#
                                        if(d.fileNames && d.fileNames.length) {
                                            layui.each(d.fileNames, function(index,item) {
                                    }}
                                        <div class="unit-content">
                                            <a class="T-download" href="javascript: void(0);" data-url="{{item.url}}">{{item.filename}}</a>
                                        </div>
                                    {{#
                                        })
                                    }
                                    }}
                            </div>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="special-key">下发单位：</div>
                        <div class="special-value">
                            <div class="check-value-box temporary-update-department">
                                    {{#
                                        if(d.deptMsg || d.groupMsg) {
                                            var exitDep = d.deptMsg.length ? d.deptMsg : [],
                                                exGgrp = d.groupMsg.length ? d.groupMsg : [],
                                                allEx = exitDep.concat(exGgrp);
                                        layui.each(allEx, function(index,item) {
                                    }}
                                        <div class="unit-content">
                                            {{item.writeusername}}
                                        </div>
                                    {{# }) }
                                    }}
                                </div>
                            </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">任务说明：</label>
                    <div class="layui-input-block">
                        <textarea name="memo" placeholder="请输入内容" class="layui-textarea" disabled style="min-height: 54px;">
                            {{d.memo ? d.memo : ""}}
                        </textarea>
                    </div>
                </div>
            </div>
    </form>    
</script>
<script>
    layui.use(['admin', 'laytpl', 'element', 'form', 'tools' ], function(){
        var $ = layui.$,
			view = layui.view,
            admin = layui.admin,
            laytpl = layui.laytpl,
            tools = layui.tools,
            element = layui.element,
            form = layui.form,
            layer = layui.layer;
        
        var totalData = [],
            $content = $('.taskForm-content');

        element.render('collapse');

        inintData();
		
		//初始获取数据
		function inintData() {
			var getTpl = taskFormTaskUlTpl.innerHTML,
			    $viewHtml = $('.taskForm-left .task-ul');
			admin.req({
                url: 'myapi/DC/api/rest/web/custom/TaskForm',
                data: {
                    model: 'select',
                    jsonId: layui.data('layuiAdmin').access_token
                },
				success: function(res){
                    totalData = res.data.data || [];
                    console.log(totalData, 'total')
					laytpl(getTpl).render(totalData, function(html){
                        $viewHtml.html(html);
                        renderForm(totalData[0]);
					});
				}
			});
		}
        //列表项点击事件
        $content.on('click', '.task-li', function() {
            var $li = $(this),
                indexLi = $li.data('index');
            if($li.data('target') === 'infoitem') {
                $li.addClass('li-active');
                $li.siblings().removeClass('li-active');
                renderForm(totalData[indexLi*1]);
            }
        });

        //文件下载事件
        $content.on('click', '.T-download', function() {
            var url = 'myapi/DC'+ $(this).data('url'),
                name = $(this).text();
            tools.downMethodfunction(url, name);
        });

        //渲染表单事件
        function renderForm(data) {
            var getTpl = taskFormTaskBasicInfoTpl.innerHTML;
            var $tplC =$('.taskForm-right .layui-colla-content');
            laytpl(getTpl).render(data, function(html){
                $tplC.html(html);
                form.render(null, 'taskForm-updateHtml-form-group');
            });
        }
        
    });
</script>